<template>
    <div class="course-container">
        <div class="col" v-for="item in courseList" :key="item.courseId">
            <div style="margin-bottom: 10px;">
                <router-link 
                :to="{ path: '/detail', query: { courseId: item.courseId } }"
                target="_blank"
                >
                    <div class="course-cover">
                        <div class="img-box">
                            <img :src="item.bannerFileUrlPc" alt="">
                        </div>
                    </div>
                    <div  class="course-cover-1">
                        <div class="classList-introduce">{{ item.courseTitle }} </div>
                        <div class="classList-person">
                        共{{ item.subSectionNum}}节课|{{item.learningNum}}人报名
                        </div>
                        <div class="classList-price">
                                <span class="price-span" v-if="item.isFree == 1"> 免费 </span>
                                <span class="old-price" v-else-if="item.isDiscount == 1 && item.isFree == 0">￥{{ item.discountPrice }} <del> ￥{{item.coursePrice}} </del>   </span>
                                <span  class="discount-desc ant-tag ant-tag-orange"  v-else> ￥{{item.coursePrice}}</span>
                            </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>             
</template>

<script>
import { getList } from '@/api/request';
export default {
name: 'courseView',
props: {
    type:{
        type:String,
        default:'free',
    },
    pageSize:{
        type:Number,
        default:5, 
    }
},
data(){
    return {
        courseList:[]
    } 
},
created() {
    getList(this.type,1,this.pageSize).then(res => {
        console.log(res)
        this.courseList = res.rows
    })
},
methods:{
   
},

}
</script>

<style scoped lang="scss">
</style>
